<template>
  <div class="main">
    <div class="main-header">
      <header>
        <div class="logo" @click="$router.push('/home')">
          <img src="@/assets/img/logo.png" alt="" />
        </div>

        <div class="header-right">
          <div class="nav">
            <ul>
              <li v-for="(item, index) in navList" :key="index">
                <router-link :to="item.url" :class="{'router-link-active': item.name == $route.meta.root}">{{ item.name }}</router-link>
              </li>
            </ul>
          </div>
          <div class="header-search">
            <div class="header-search-icon">
              <img src="@/assets/img/icon-search.png" alt="" />
            </div>
            <input
              type="text"
              v-model="keyword"
              placeholder="搜索内容和用户"
              class="header-search-input"
            />
            <div class="header-search-btn" @click="searchFun">搜索</div>
          </div>
          <div v-if="!isLogin" class="header-login-btn" @click="$router.push('/login')">
            <span>登录</span>
          </div>
          <div v-else class="header-login-box" @click="$router.push('/center/info')">
            <div class="avatar">
              <img v-if="user_info.image" :src="user_info.image" alt="" />
              <img v-else src="@/assets/img/touxiang.png" alt="" />
            </div>
            <div class="avatar-name u-line-1">{{ user_info.name }}</div>
            <div class="avatar-login-out" @click="gooutFun">退出</div>
          </div>
        </div>
      </header>
    </div>
    <div class="main-content" style="width: 100%" v-if="$route.name == 'home'">
      <router-view :key="getComputedKey" />
    </div>
    <div class="main-content" v-else>
      <router-view :key="getComputedKey" />
    </div>
    <div class="main-footer">
      <footer>
        <div class="footer-left">
          <img src="@/assets/img/footer-logo.png" alt="" />
        </div>
        <div class="footer-right">
          <div class="footer-link">
            <span class="link" @click="$router.replace({ path: '/forum-list' })"
              >论坛</span
            >
            <span class="link" @click="$router.replace({ path: '/know-list' })"
              >知识</span
            >
            <span class="link" @click="$router.replace({ path: '/notice-list' })"
              >公告</span
            >
          </div>
          <div class="footer-copyright">
            copyright © 2023 氦星光联科技(深圳)有限公司 | 深ICP备123456789号
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "App",
  data() {
    return {
      keyword: "",
      navList: [
        { name: "首页", url: "/home" },
        { name: "公告", url: "/notice-list" },
        { name: "论坛", url: "/forum-list" },
        { name: "知识库", url: "/study-list" },
      ],
    };
  },
  computed: {
    ...mapState(["isLogin", "user_info"]),
    getComputedKey() {
      return this.$route.path + Date.now();
    },
  },
  mounted() {},
  methods: {
    searchFun() {
      if (!this.keyword.trim()) {
        return this.$message.error("请输入搜索内容");
      }
      if (this.$route.path === "/index") {
        this.$bus.$emit("search", this.keyword);
      } else {
        console.log(this.$route);
        let currentData = {
          "forum-list": 0,
          "know-list": 1,
          "study-list": 2,
          "study-list2": 2,
          "notice-list": 3,
        };
        let currentIndex = currentData[this.$route.name] || 0;
        this.$router.push({
          path: "/index",
          query: { keyword: this.keyword, current: currentIndex },
        });
      }
    },
    gooutFun() {
      this.$store.dispatch("vuex_out");
    },
  },
};
</script>

<style lang="less" scoped>
.main-header {
  width: 100%;
  height: 1.375rem;
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 17.5rem;
    height: 100%;
    margin: 0 auto;
    .logo {
      cursor: pointer;
      width: 1.0125rem;
      height: 0.65rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      .header-login-btn {
        text-align: center;
        line-height: 0.45rem;
        width: 1.0625rem;
        height: 0.45rem;
        border-radius: 0.625rem;
        opacity: 1;
        border: 0.0125rem solid #4f8af8;
        cursor: pointer;
        font-size: 0.2rem;
        color: #4f8af8;
      }
      .header-login-box {
        display: flex;
        align-items: center;
        width: 2.25rem;
        height: 0.45rem;
        border: 0.0125rem solid #4f8af8;
        border-radius: 0.1rem;
        .avatar {
          width: 0.35rem;
          height: 0.35rem;
          margin-left: 0.15rem;
          margin-right: 0.15rem;
          user-select: none;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .avatar-name {
          width: 0.875rem;
          font-size: 0.175rem;
          color: #000000;
          cursor: pointer;
        }
        .avatar-login-out {
          font-size: 0.175rem;
          color: #4f8af8;
          font-weight: bold;
          flex: 1;
          padding-right: 0.15rem;
          text-align: right;
          cursor: pointer;
        }
      }
      .header-search {
        display: flex;
        align-items: center;
        width: 4.5rem;
        height: 0.45rem;
        border-radius: 0.1rem;
        border: 0.0125rem solid #4f8af8;
        margin-right: 1.25rem;
        .header-search-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 1.075rem;
          height: 100%;
          background: #4f8af8;
          border-radius: 0.09rem;
          cursor: pointer;
          font-size: 0.2rem;
          color: #fff;
          user-select: none;
        }
        .header-search-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.65rem;
          height: 100%;
          user-select: none;
          img {
            width: 0.2rem;
            height: 0.2rem;
          }
        }
        .header-search-input {
          flex: 1;
          padding-right: 0.125rem;
          height: 100%;
          border: none;
          outline: none;
          font-size: 0.15rem;
          color: #4f8af8;
          background: none;
          &::-webkit-input-placeholder {
            color: rgba(#4f8af8, 0.5);
            font-size: 0.15rem;
          }
        }
      }
      .nav {
        display: flex;
        align-items: center;
        margin-right: 0.75rem;
        ul {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          height: 0.45rem;
          li {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 0.5rem;
            list-style: none;
            line-height: 0.45rem;
            user-select: none;
            a {
              font-size: 0.25rem;
              color: #707070;
              text-decoration: none;
            }
            .router-link-active {
              border-bottom: 0.025rem solid #4f8af8;
            }
          }
        }
      }
    }
  }
}
.main-content {
  width: 17.5rem;
  margin: 0 auto;
  min-height: calc(100vh - 1.8rem - 1.375rem);
}
.main-footer {
  width: 100%;
  height: 1.8rem;
  background: #111;
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 17.5rem;
    margin: 0 auto;
    height: 100%;
    .footer-left {
      img {
        width: 6.8625rem;
        height: 0.6rem;
        user-select: none;
      }
    }
    .footer-right {
      .footer-link {
        display: flex;
        justify-content: flex-end;
        .link {
          font-size: 0.2rem;
          color: #fff;
          cursor: pointer;
          user-select: none;
          margin-left: 0.85rem;
        }
      }
      .footer-copyright {
        font-size: 0.175rem;
        color: #d4d4d4;
        text-align: right;
        margin-top: 0.2rem;
      }
    }
  }
}
</style>
